<template>
  <div class="audition300">
    <p>
      <a href="https://github.com/immutable-js/immutable-js/tree/fb4701a71ca3b138cb31b6697f047e637780867e" target="_blank">immutablejs源码</a>
    </p>
    <p>
      <a href="https://www.jianshu.com/p/0fa8c7456c15" target="_blank">immutablejs介绍</a>
    </p>
    <p><br></p>
    <p>immutable是什么？</p>
    <p>immutable是一个对象，提供一些持久化的数据结构和方法。</p>
    <p>immutable化的数据，一旦创建，就不能被修改。对immutable数据的任何操作，都会返回一个新的immutable数据</p>
    <p>使用旧数据创建新数据时，保证旧数据可用的同时且保持不变。</p>
    <p><br></p>
    <p>优点：</p>
    <p>1. 避免数据拷贝带来的复杂度</p>
    <p>平时操作js的拷贝时，容易发生这种情况：</p>
    <code class="code">
      var obj1 = {a: 1}<br/>
      var obj2 = obj1<br/>
      obj2.a =2<br/>
      console.log(obj1) // {a: 2}<br/>
    </code>
    <p>修改obj2时，obj1中的内容也被修改了。如果使用深拷贝，则会增加性能损耗</p>
    <p>而使用immutabel就会变得简单：</p>
    <code class="code">
      var obj1 = <span class="color">Immutable</span>.<span class="color1">Map</span>({a: 1})<br/>
      obj2 = obj1.<span class="color2">set</span>('a', 2)<br/>
      console.log(obj2.<span class="color3">get</span>('a')) // 2<br/>
      console.log(obj1.<span class="color3">get</span>('a')) // 1
    </code>
    <p><br></p>
    <p>2. 节省内存空间</p>
    <p>immutable数据有结构共享的特性，也就是说旧数据中没变化的数据会保留到新数据中，新数据也可以直接使用</p>
    <code class="code">
      var obj = Immutable.Map({c: 'hello'})<br/>
      var obj1 = Immutable.Map({a: 1, b: 'dili', d: obj})<br/>
      obj2 = obj1.set('a', 2)<br/>
      console.log(obj2.get('b')) // 'dili'<br/>
      console.log(obj1.get('b')) // 'dili'<br/>
      console.log(obj2.get('d') === obj1.get('d')) // true
    </code>
    <p>示例中旧数据obj1中的b和d都没有改变，被完整的保留到新数据obj2中</p>
    <p>3. 函数式编程</p>
    <p>immutable提供的结构和方法都是函数，更适合前端开发</p>
    <p><br></p>
    <p>缺点：</p>
    <p>除了学习成本和额外引入的资源文件，immutable提供的方法容易和原生js混淆</p>
    <p><br></p>
    <p>Immutable对象打印结果展示图：</p>
    <img src="@images/immutablejs1.png" alt="" class="img" />
  </div>
</template>

<script>
export default {
  name: 'Audition300'
}
</script>

<style>

</style>